<template>
    <div class="my-component">
      <van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
        <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
        <template #pulling="props">
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
            :style="{ transform: `scale(${props.distance / 80})` }"
          />
        </template>
  
        <!-- 释放提示 -->
        <template #loosing>
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
          />
        </template>
  
        <!-- 加载提示 -->
        <template #loading>
          <img
            class="doge"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/doge-fire.jpeg"
          />
        </template>
        <p>刷新次数: {{ count }}</p>
      </van-pull-refresh>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { PullRefresh } from 'vant';
  
  const isLoading = ref(false);
  const count = ref(0);
  
  const onRefresh = () => {
    setTimeout(() => {
      isLoading.value = false;
      count.value++;
    }, 1000);
  };
  </script>
  
  <style scoped>
  .my-component {
    width: 100%;
  }
  
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
  </style>